<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>灾害信息系统注册页面</title>
<%--  注册界面的css修饰  --%>
    <style>
        body
        {
            margin: 0;
            padding: 0;
            font-family: sans-serif;
            background: #34495e;
        }
        .box
        {
            width: 600px;
            padding: 40px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            background: #191919;
            text-align: center;
        }
        .box h1
        {
            color: white;
            text-transform: uppercase;
            font-weight: 500;
        }
        .box input[type = "text"],.box input[type = "password"]
        {
            border:0;
            background: none;
            display: block;
            margin: 20px auto;
            text-align: center;
            border: 2px solid #3498db;
            padding: 14px 10px;
            width: 200px;
            outline: none;
            color: white;
            border-radius: 24px;
            transition: 0.25s;
        }
        .box input[type = "text"]:focus,.box input[type = "password"]:focus
        {
            width: 280px;
            border-color: #2ecc71;
        }
        .box input[type = "submit"]
        {
            border:0;
            background: none;
            display: block;
            margin: 20px auto;
            text-align: center;
            border: 2px solid #2ecc71;
            padding: 14px 40px;
            outline: none;
            color: white;
            border-radius: 24px;
            transition: 0.25s;
            cursor: pointer;
        }
        .box input[type = "submit"]:hover
        {
            background: #2ecc71;
        }
        .box input[type = "radio"]:hover
        {
            background: #2ecc71;
        }
    </style>
<%--  注册界面的js函数  --%>
    <script type="text/javascript">
        function check() {
            var name = document.getElementsByName("username")[0];
            var pwd1 = document.getElementsByName("password")[0];
            var pwd2 = document.getElementsByName("repassword")[0];
            if (name.value == "")
            {
                alert("用户名不能为空");
                return false;
            }
            if (pwd1.value == "")
            {
                alert("密码不能为空");
                return false;
            }
            if (pwd2.value == "")
            {
                alert("请再次输入密码");
                return false;
            }
            if (pwd1.value!= pwd2.value)
            {
                alert("两次密码不一致");
                return false;mm
            }
            return true;
        }
    </script>
</head>
<body>
<form class="box" onsubmit="return check()" caction="register" method="post">
    <h1>Register</h1>
    <input type="text" name="username" placeholder="Username">
    <input type="password" name="password" placeholder="Password">
    <input type="password" name="repassword" placeholder="Password Again">
    <input type="submit" name="" value="Register">
    <a href="login">已有账号？点击登录</a>
</form>
</body>
</html>
